<template>
  <div class="user-page">
    <!-- 我的 -->
    <!-- 头部 -->
    <div class="top">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="">
    </div>
    <!-- 提示登录按钮区域 -->
    <div class="register">
      <!-- 园 -->
      <div class="garden My_myIcon__3cKIV">
        <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
      </div>
      <div class="centerText">
        <span>游客</span>
      </div>
      <div class="btn">
        <van-button type="primary" @click="skip" size="normal">去登录</van-button>
      </div>
    </div>
    <div class="myMsg">
      <!-- column-num是3列的意思 -->
    <van-grid :column-num="3">
      <van-grid-item  text="我的收藏" class="iconfont icon-wujiaoxing"/>
      <van-grid-item  text="我的出租" class="iconfont icon-fangzi"/>
      <van-grid-item  text="看房记录" class="iconfont icon-shizhong"/>
      <van-grid-item  text="成为房主" class="iconfont icon-wenjianjia"/>
      <van-grid-item  text="个人资料" class="iconfont icon-geren"/>
      <van-grid-item  text="联系我们" class="iconfont icon-kefufenxiermaikefu
"/>
    </van-grid>
    </div>
    <div class="images">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>

  </div>
</template>

<script>
export default {
  name: "user-page",
  data() {
    return {};
  },
  methods: {
    skip() {
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="less" scoped>

.user-page {
  margin-bottom: 50px;
  .top {
    width: 100%;
    img{
      width: 100%;
    }
  }

  .register {
    width: 90%;
    height: 170px;
    border: 1px solid #ccc;
    margin: 0 auto;
    margin-top: -60px;
    position: absolute;
    left: 5%;
    background-color: #fff;
    box-shadow: 0 0 15px 1px #ccc;
  .My_myIcon__3cKIV {
    position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 5px solid #f5f5f5;
    display: inline-block;
    box-shadow: 0 2px 2px #bdbdbd;
    position: fixed;
    left: 40%;
    img {
      width: 100%;
    }
}
    .btn {
      text-align: center;
      width: 100%;

      .van-button {
        width: 100px;
        border-radius: 10px;
      }
    }
  }
}
.images {
  width: 100%;
  img {
    width: 100%;
  }
}
.myMsg {
  margin-top: 140px;
}
.centerText {
  width: 100%;
  height: 30px;
  text-align: center;
  margin-top: 55px;
  span {
    text-align: center;
  }
}
.icon-wujiaoxing,
.icon-fangzi,
.icon-shizhong,
.icon-wenjianjia,
.icon-geren,
.icon-kefufenxiermaikefu,
.icon-wujiaoxing  {
  text-align: center;
  line-height: 20px;
  font-size: 23px;
  margin-top: 15px;
}
</style>
